<div class="gutter-example" style="margin-bottom: 20px">
    <div nz-row [nzGutter]="8">
        <div nz-col class="gutter-row" [nzSpan]="6">
            <div class="gutter-box"></div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="4">
            <div class="gutter-box"></div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="8" style="text-align: right">
            <div class="gutter-box">
                <button nz-button [nzType]="'primary'" style="width: 100px;" [routerLink]="['/user.edit','']">
                    <i class="anticon anticon-user-add"></i><span>创建用户</span>
                </button>
                <i style="display: inline-block;width: 1px;"></i>
                <button nz-button [nzType]="'primary'" style="width: 100px;" (click)="removeUserList(userList)">
                    <i class="anticon anticon-usergroup-delete"></i><span>删除用户</span>
                </button>
            </div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="6">
            <div class="gutter-box" style="text-align: right">
                <nz-input [nzType]="'search'"
                          [nzPlaceHolder]="'请输入用户名进行搜索'"
                          [(ngModel)]="keyword"
                          style="width: 100%;">
                </nz-input>
            </div>
        </div>
    </div>
</div>

<nz-table #nzTable
          [nzDataSource]="userList"
          [nzPageSize]="10"
          [nzLoading]="_loading"
          [nzTotal]="_total"
          [nzShowSizeChanger]="true"
          [(nzPageIndex)]="_current"
          nzCheckbox="true">
    <thead nz-thead>
    <tr>
        <th nz-th [nzCheckbox]="true">
            <label nz-checkbox
                   [(ngModel)]="_allChecked"
                   [nzIndeterminate]="_indeterminate"
                   (ngModelChange)="_checkAll($event)">
            </label>
        </th>
        <th nz-th><span>序号</span></th>
        <th nz-th><span>用户名</span></th>
        <th nz-th><span>工号</span></th>
        <th nz-th><span>头衔</span></th>
        <th nz-th><span>真实姓名</span></th>
        <th nz-th><span>部门</span></th>
        <th nz-th><span>角色</span></th>
        <th nz-th><span>账号状态</span></th>
        <th nz-th><span>注册时间</span></th>
        <th nz-th><span>最近登陆时间</span></th>
        <th nz-th><span>登陆次数</span></th>
        <th nz-th><span>地址</span></th>
        <th nz-th style="text-align: right"><span>操作</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data; let idx = index;">
        <td nz-td [nzCheckbox]="true">
            <label
                    nz-checkbox
                    [(ngModel)]="data.checked"
                    (ngModelChange)="_refreshStatus($event)">
            </label>
        </td>
        <td nz-td>
            <a>{{idx+1}}</a>
        </td>
        <td nz-td>
            <a>{{data.account}}</a>
        </td>
        <td nz-td>{{data.jobSeries}}</td>
        <td nz-td>{{data.workTitle}}</td>
        <td nz-td>{{data.userName}}</td>
        <td nz-td>{{data.department}}</td>
        <td nz-td>{{data.role}}</td>
        <td nz-td>{{data.status}}</td>
        <td nz-td>{{data.createTime}}</td>
        <td nz-td>{{data.lastLoginTime}}</td>
        <td nz-td>{{data.loginTimes}}</td>
        <td nz-td>{{data.address}}</td>
        <td nz-td style="text-align: right">
            <!--btn-->
            <nz-popover [nzTitle]="'温馨提示'" [nzPlacement]="'bottom'">
                <button nz-button [nzType]="'primary'" [nzShape]="'circle'" nz-popover
                        [routerLink]="['/user.edit',data._id]">
                    <i class="anticon anticon-edit"></i>
                </button>
                <ng-template #nzTemplate>
                    <div>
                        <p>可以编辑用户信息</p>
                        <p>可以编辑用户信息</p>
                    </div>
                </ng-template>
            </nz-popover>


            <nz-popover [nzTitle]="'温馨提示'" [nzPlacement]="'bottom'">
                <button nz-button [nzType]="'danger'" [nzShape]="'circle'" nz-popover>
                    <i class="anticon anticon-lock"></i>
                </button>
                <ng-template #nzTemplate>
                    <div>
                        <p>禁用／解禁该用户！</p>
                        <p>将无法登陆！</p>
                    </div>
                </ng-template>
            </nz-popover>

            <nz-popover [nzTitle]="'温馨提示'" [nzPlacement]="'bottom'">
                <button nz-button [nzType]="'danger'" [nzShape]="'circle'" nz-popover (click)="removeUser(data)">
                    <i class="anticon anticon-close"></i>
                </button>
                <ng-template #nzTemplate>
                    <div>
                        <p>删除该用户！</p>
                        <p>该用户数据将不再存在！</p>
                        <p>请谨慎操作！</p>
                    </div>
                </ng-template>
            </nz-popover>
            <!---->
        </td>
    </tr>
    </tbody>
</nz-table>
